<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Material of Analysis | 在 Markdown 中使用 Vue</title>
    <meta name="description" content="The analytical data that you often use to learn">
    <link rel="icon" href="/material/logo.png">
  <link rel="manifest" href="/material/manifest.json">
  <meta name="theme-color" content="#3eaf7c">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <link rel="apple-touch-icon" href="/material/icons/apple-touch-icon-152x152.png">
  <link rel="mask-icon" href="/material/icons/safari-pinned-tab.svg" color="#3eaf7c">
  <meta name="msapplication-TileImage" content="/icons/msapplication-icon-144x144.png">
  <meta name="msapplication-TileColor" content="#000000">
    
    <link rel="preload" href="/material/assets/css/0.styles.89749010.css" as="style"><link rel="preload" href="/material/assets/js/app.671f232e.js" as="script"><link rel="preload" href="/material/assets/js/1.a893eea4.js" as="script"><link rel="preload" href="/material/assets/js/17.c88c3a9c.js" as="script"><link rel="preload" href="/material/assets/js/18.0635186f.js" as="script"><link rel="preload" href="/material/assets/js/19.5e722a99.js" as="script"><link rel="prefetch" href="/material/assets/js/9.6ad28882.js"><link rel="prefetch" href="/material/assets/js/2.ad32dd32.js"><link rel="prefetch" href="/material/assets/js/3.2af42d2c.js"><link rel="prefetch" href="/material/assets/js/4.b8a50edf.js"><link rel="prefetch" href="/material/assets/js/5.3a34f633.js"><link rel="prefetch" href="/material/assets/js/6.36baf8b1.js"><link rel="prefetch" href="/material/assets/js/7.23741c7b.js"><link rel="prefetch" href="/material/assets/js/8.0b506f6a.js"><link rel="prefetch" href="/material/assets/js/10.aa5bc1f8.js"><link rel="prefetch" href="/material/assets/js/11.b5d01b0b.js"><link rel="prefetch" href="/material/assets/js/12.2aab57fe.js"><link rel="prefetch" href="/material/assets/js/13.17c8fcb3.js"><link rel="prefetch" href="/material/assets/js/14.b0d8de38.js"><link rel="prefetch" href="/material/assets/js/15.95c4b4d8.js"><link rel="prefetch" href="/material/assets/js/16.8279b098.js">
    <link rel="stylesheet" href="/material/assets/css/0.styles.89749010.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container no-sidebar"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div><a href="/material/" class="home-link router-link-active"><!----><span class="site-name">
      Material of Analysis
    </span></a><div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""><!----></div><nav class="nav-links can-hide"><div class="nav-item"><a href="/material/basic/" class="nav-link">基础</a></div><a href="https://github.com/docschina/vuepress" target="_blank" rel="noopener noreferrer" class="repo-link">
    GitHub
    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav></div></header><div class="sidebar-mask"></div><div class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/material/basic/" class="nav-link">基础</a></div><a href="https://github.com/docschina/vuepress" target="_blank" rel="noopener noreferrer" class="repo-link">
    GitHub
    <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></a></nav><!----></div><div class="page"><div class="content"><h1 id="在-markdown-中使用-vue"><a href="#在-markdown-中使用-vue" aria-hidden="true" class="header-anchor">#</a> 在 Markdown 中使用 Vue</h1><h2 id="浏览器-api-访问限制"><a href="#浏览器-api-访问限制" aria-hidden="true" class="header-anchor">#</a> 浏览器 API 访问限制</h2><p>由于 VuePress 应用程序在生成静态构建文件时会在 Node.js 中进行服务器渲染，所以任何 Vue 用法都必须符合<a href="https://ssr.vuejs.org/en/universal.html" target="_blank" rel="noopener noreferrer">通用代码要求</a>。简而言之，确保只在 <code>beforeMounted</code> 或 <code>mounted</code> 钩子中访问 Browser / DOM API。</p><p>如果你正在使用或演示非 SSR 友好的组件（比如说包含了自定义指令），则可以将它们包装在内置的 <code>&lt;ClientOnly&gt;</code> 组件中：</p><pre class="language-md"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ClientOnly</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>NonSSRFriendlyComponent</span><span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ClientOnly</span><span class="token punctuation">&gt;</span></span>
</code></pre><p>请注意，这不会修复<strong>在 import</strong> 时访问浏览器 API 的组件或库的问题 - 为了使用在导入时使用浏览器环境的代码，你需要将它们动态地导入到合适的生命周期钩子中：</p><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script language-javascript">
<span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  <span class="token function">mounted</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">'./lib-that-access-window-on-import'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span>module <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      <span class="token comment">// use code</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
</code></pre><h2 id="模板-templating"><a href="#模板-templating" aria-hidden="true" class="header-anchor">#</a> 模板(templating)</h2><h3 id="插值"><a href="#插值" aria-hidden="true" class="header-anchor">#</a> 插值</h3><p>每个 markdown 文件首先被编译成 HTML，然后作为 Vue 组件传递给 <code>vue-loader</code> 。这意味着你可以在文本中使用 Vue 风格的插值表达式：</p><p><strong>输入</strong></p><pre class="language-md"><code>{{ 1 + 1 }}
</code></pre><p><strong>输出</strong></p><pre><code>2</code></pre><h3 id="指令"><a href="#指令" aria-hidden="true" class="header-anchor">#</a> 指令</h3><p>指令也起作用：</p><p><strong>输入</strong></p><pre class="language-md"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>i in 3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>{{ i }} <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
</code></pre><p><strong>输出</strong></p><pre><code><span>1 </span><span>2 </span><span>3 </span></code></pre><h3 id="访问网站和页面数据"><a href="#访问网站和页面数据" aria-hidden="true" class="header-anchor">#</a> 访问网站和页面数据</h3><p>已编译的组件没有任何私有数据，但可以访问<a href="/material/guide/custom-themes.html#site-and-page-metadata">网站元数据</a>。例如：</p><p><strong>输入</strong></p><pre class="language-md"><code>{{ $page }}
</code></pre><p><strong>输出</strong></p><pre class="language-json"><code><span class="token punctuation">{</span>
  <span class="token property">&quot;path&quot;</span><span class="token operator">:</span> <span class="token string">&quot;/using-vue.html&quot;</span><span class="token punctuation">,</span>
  <span class="token property">&quot;title&quot;</span><span class="token operator">:</span> <span class="token string">&quot;Using Vue in Markdown&quot;</span><span class="token punctuation">,</span>
  <span class="token property">&quot;frontmatter&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre><h2 id="转义-escaping"><a href="#转义-escaping" aria-hidden="true" class="header-anchor">#</a> 转义(escaping)</h2><p>默认情况下，fenced 代码块会自动用 <code>v-pre</code> 包装。如果要在内联代码片段或纯文本内显示原始插值或特定于 Vue 的语法，则需要用 <code>v-pre</code> 自定义容器包装段落：</p><p><strong>输入</strong></p><pre class="language-md"><code>::: v-pre
<span class="token code keyword">`{{ This will be displayed as-is }}`</span>
:::
</code></pre><p><strong>输出</strong></p><div><p><code>{{ This will be displayed as-is }}</code></p></div><h2 id="使用组件（using-components）"><a href="#使用组件（using-components）" aria-hidden="true" class="header-anchor">#</a> 使用组件（Using Components）</h2><p><code>.vuepress / components</code> 中的任意 <code>* .vue</code> 文件都会自动注册为 <a href="https://vuejs.org/v2/guide/components-registration.html#Global-Registration" target="_blank" rel="noopener noreferrer">全局(global)</a>, <a href="https://vuejs.org/v2/guide/components-dynamic-async.html#Async-Components" target="_blank" rel="noopener noreferrer">异步(async)</a> 组件。例如：</p><pre class="language-text"><code>.
└─ .vuepress
   └─ components
      ├─ demo-1.vue
      ├─ OtherComponent.vue
      └─ Foo
         └─ Bar.vue
</code></pre><p>在任何 markdown 文件中，你可以直接使用这些组件（名称是从文件名推断的）：</p><pre class="language-md"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>demo-1</span><span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>OtherComponent</span><span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Foo-Bar</span><span class="token punctuation">/&gt;</span></span>
</code></pre><p class="demo">
  Hello this is &lt;demo-1&gt;
</p><p class="demo">This is another component</p><p class="demo">
  Hello this is &lt;Foo-Bar&gt;
</p><div class="warning custom-block"><p class="custom-block-title">重要</p><p>确保自定义组件的名称包含连字符或符合 PascalCase 命名规则。否则，它将被视为内联元素，并被包裹在一个 <code>&lt;p&gt;</code> 标签内，这将导致 hydration （Vue 的渲染子过程）不匹配，因为 <code>&lt;p&gt;</code> 不允许块元素放置在其中。</p></div><h3 id="使用预处理器-using-pre-processors"><a href="#使用预处理器-using-pre-processors" aria-hidden="true" class="header-anchor">#</a> 使用预处理器(using pre-processors)</h3><p>VuePress 已经为如下预处理器内置了相关的 webpack 配置：<code>sass</code>, <code>scss</code>, <code>less</code>, <code>stylus</code> 和 <code>pug</code>。要使用它们你只需要在项目中安装对应的依赖即可。例如，要使用 <code>sass</code>，需要在项目中安装：</p><pre class="language-bash"><code>yarn add -D sass-loader node-sass
</code></pre><p>然后，你就可以在 markdown 和主题组件使用如下代码：</p><pre class="language-vue"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">&quot;</span>sass<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token style language-css">
.title
  <span class="token property">font-size</span><span class="token punctuation">:</span> 20px
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
</code></pre><p>使用 <code>&lt;template lang=&quot;pug&quot;&gt;</code> 需要安装 <code>pug</code> 和 <code>pug-plain-loader</code>：</p><pre class="language-bash"><code>yarn add -D pug pug-plain-loader
</code></pre><div class="tip custom-block"><p class="custom-block-title">提示</p><p>如果你是 Stylus 用户，你并不需要在你的项目中安装 <code>stylus</code> 和 <code>stylus-loader</code>，因为 VuePress 在内部也使用了 Stylus。</p><p>对于没有内置 webpack 配置支持的预处理器，除了安装必要的依赖外，还需要 <a href="/material/config/#configurewebpack">扩展内部 webpack 配置</a>。</p></div><h2 id="脚本和样式提升-script-style-hoisting"><a href="#脚本和样式提升-script-style-hoisting" aria-hidden="true" class="header-anchor">#</a> 脚本和样式提升(script &amp; style hoisting)</h2><p>有时你可能需要将一些 JavaScript 或 CSS 仅应用于当前页面。在这些情况下，你可以在 markdown 文件中直接编写原生的 <code>&lt;script&gt;</code> 和 <code>&lt;style&gt;</code> 块，并将它们从编译的 HTML 中提取出来，以 <code>&lt;script&gt;</code> 和 <code>&lt;style&gt;</code> 的形式插入到生成 Vue 单个文件组件中。</p><p class="demo example_2DuOfB6G"></p><hr><blockquote><p>原文：<a href="https://vuepress.vuejs.org/guide/using-vue.html" target="_blank" rel="noopener noreferrer">https://vuepress.vuejs.org/guide/using-vue.html</a></p></blockquote><hr></div><div class="content edit-link"><a href="https://github.com/docschina/vuepress/edit/master/docs/guide/using-vue.md" target="_blank" rel="noopener noreferrer">在GitHub上编辑此页</a><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path><polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg></div><!----></div></div></div>
    <script src="/material/assets/js/1.a893eea4.js" defer></script><script src="/material/assets/js/17.c88c3a9c.js" defer></script><script src="/material/assets/js/18.0635186f.js" defer></script><script src="/material/assets/js/19.5e722a99.js" defer></script><script src="/material/assets/js/app.671f232e.js" defer></script>
  </body>
</html>
